<template>
    <HeadMenu />
    <div class="categrate">
        <div class="leftnenu">

            <div class="group1 group">
                <div class="title">档期查询</div>
                <div class="bk1">
                    <el-date-picker type="date" placeholder="典礼日" :disabled-date="disabledDate" :shortcuts="shortcuts"
                        :size="size" />
                    <el-date-picker type="datetime" placeholder="庆典时间" :default-time="defaultTime" />
                </div>
            </div>
            <div class="group2 group">
                <div class="title">主持人分类</div>
                <div class="bk1 pub">
                    <a href="###" class="item">全部</a>
                    <a href="###" class="item">首席主持</a>
                    <a href="###" class="item">资深主持</a>
                    <a href="###" class="item">高级主持</a>
                    <a href="###" class="item">专业主持</a>
                </div>
            </div>
            <div class="group3 group">
                <div class="title">服务类型</div>
                <div class="bk1 pub">
                    <a href="###" class="item">全部</a>
                    <a href="###" class="item">首席主持</a>
                    <a href="###" class="item">资深主持</a>
                    <a href="###" class="item">高级主持</a>
                    <a href="###" class="item">专业主持</a>
                </div>
            </div>
            <div class="group4 group">
                <div class="title">性别</div>
                <div class="bk1 pub">
                    <a href="###" class="item">全部</a>
                    <a href="###" class="item">男士</a>
                    <a href="###" class="item">女士</a>

                </div>
            </div>
            <div class="group5 group">
                <div class="title">标签</div>
                <div class="bk1 pub">
                    <a href="###" class="item">全部</a>
                    <a href="###" class="item">轻松幽默</a>
                    <a href="###" class="item">不煽情</a>
                    <a href="###" class="item">随心自然</a>
                    <a href="###" class="item">活泼</a>
                    <a href="###" class="item">自然优雅</a>
                    <a href="###" class="item">清爽阳光</a>

                </div>
            </div>
            <!-- 价格范围 -->
            <div class="group5 group">
                <div class="title">价格范围</div>
                <div class="pub2">
                    <input type="text" />
                    <span class="linespan">-</span>
                    <input type="text" />
                    <span class="searcbtn">查询</span>
                </div>
            </div>
        </div>

        <div class="rmain">
            <div class="rtitle">
                <div class="top">首席主持人</div>
                <div class="bottom">Schedule inquiry</div>
            </div>
            <div class="hostlist">
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>

            </div>
            <div class="rtitle" style="margin-top: 80px;">
                <div class="top">资深主持人</div>
                <div class="bottom">Schedule inquiry</div>
            </div>
            <div class="hostlist" style="padding-bottom: 65px;">
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>
                <div class="hostitem">
                    <div class="peopleimg">
                        <img src="../../assets/images/yuan.png" />
                    </div>
                    <div class="name">蔓延摄像</div>
                    <div class="style">
                        <ul>
                            <li>文艺</li>
                            <li>纪实</li>
                            <li>电影感</li>
                        </ul>
                    </div>
                    <div class="pice">
                        <span class="small"> ￥</span>1660
                    </div>

                    <div class="container">
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <div class="image-wrapper">
                            <img src="../../assets/images/video.png" />
                        </div>
                        <!-- 继续添加更多的图片包裹器 -->
                    </div>
                    <div class="ydbtn">立刻预定</div>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup>
import {
    ref
} from 'vue'
import HeadMenu from '../../views/headerMenu.vue'
</script>
<style scoped lang="scss">
/* 针对WebKit浏览器 */
::-webkit-scrollbar {
    width: 12px; /* 可选，设置滚动条宽度 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: transparent; /* 轨道背景透明 */
}
 
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: transparent; /* 滑块背景透明 */
}
.container {
    width: 100%;
    max-width: 360px;
    /* 根据需要调整宽度 */
    height: 110px;
    /* 根据需要调整高度 */
    overflow-x: scroll;
    /* 启用横向滚动条 */
    scroll-snap-type: x mandatory;
    /* 确保滚动位置固定 */
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    gap: 20px; 
    /* 可选：添加内阴影效果 */
}

.image-wrapper {
    background: red;
    flex: none;
    /* 防止图片容器伸缩 */
    width: 142px;
    height: 80px;
    /* 每个图片容器占据整个容器的宽度 */
    scroll-snap-align: start;
    /* 确保滚动时对齐到容器的开始位置 */
}

.image-wrapper img {
    width: 100%;
    /* 图片宽度适应容器 */
    height: 100%;
    /* 图片高度适应容器 */
    object-fit: cover;
    /* 图片保持比例填充容器 */
}

.categrate {
    width: 94.270%;
    margin: 0 auto;
    margin-top: 100px;
    display: flex;
    gap: 40px;

    .leftnenu {
        width: 26.39%;
        background: rgba(20, 20, 20, 0.8);
        padding: 0 10px;

        .title {
            color: rgba(254, 238, 212, 1);
            font-family: AlibabaPuHuiTi;
            font-size: 18px;
            line-height: 25px;
            margin-bottom: 7px;
        }

        .group {
            margin-top: 15px;
        }

        .group1 {

            .bk1 {
                display: flex;
                gap: 20px;
            }
        }

        .pub {
            display: flex;
            flex-wrap: wrap;

            .item {
                padding: 5px 6px;
                border-radius: 4px;
                background: rgba(77, 77, 77, 1);
                color: rgba(176, 176, 176, 1);
                text-decoration: none;
                margin-right: 10px;
                margin-bottom: 12px;
            }
        }
    }
}

.pub2 {
    display: flex;
    align-items: center;

    input {
        width: 100px;
        height: 38px;
        background: rgba(77, 77, 77, 1);
    }

    .linespan {
        color: #fff;
        margin: 0 10px;
    }
}

.searcbtn {
    width: 76px;
    height: 38px;
    border-radius: 4px;
    background: rgba(250, 187, 88, 1);
    color: rgba(19, 21, 23, 1);
    font-family: AlibabaPuHuiTi;
    font-size: 14px;
    text-align: center;
    line-height: 38px;
    margin-left: 12px;
}

.rmain {
    flex: 1;

    .rtitle {
        .top {
            color: rgba(36, 36, 36, 1);
            font-family: FZFengYaSongS;
            font-size: 32px;
            line-height: 39px;
            text-align: center;
        }

        .bottom {
            color: rgba(79, 79, 79, 1);
            font-family: FZFengYaSongS;
            font-size: 14px;
            text-align: center;
        }
    }

    .hostlist {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-top: 50px;
        .hostitem {
            background: black;
            aspect-ratio: 1 / 1.0722;
            border-radius: 4px;

            .peopleimg {
                width: 21.38%;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                margin: 0 auto;
                margin-top: 23px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    border: 1px solid rgba(250, 187, 88, 1);
                }
            }

            .name {
                color: rgba(255, 255, 255, 1);
                font-family: AlibabaPuHuiTi;
                font-size: 22px;
                line-height: 31px;
                text-align: center;
                margin-top: 6px;
            }

            .style {
                ul {
                    display: flex;
                    justify-content: center;

                    li {
                        color: rgba(179, 179, 179, 1);
                        font-family: AlibabaPuHuiTi;
                        font-size: 12px;
                        line-height: 17px;
                    }

                    //伪类添加li之间的间隔
                    li:not(:last-child)::after {
                        content: '';
                        height: 12px;
                        width: 1px;
                        background: rgba(140, 140, 140, 1);
                        display: inline-block;
                        margin: 0 10px;

                    }
                }

            }

            .pice {
                color: rgba(250, 187, 88, 1);
                font-family: FZFengYaSongS;
                font-size: 30px;
                text-align: center;

                .small {
                    font-size: 17px;
                }
            }

            .ydbtn {
                width: 104px;
                height: 33px;
                border-radius: 37.5px;
                border: 1px solid rgba(250, 187, 88, 1);
                background: rgba(19, 21, 23, 1);
                text-align: center;
                line-height: 31px;
                color: rgba(255, 218, 158, 1);
                margin: 0 auto;
                margin-top: 25px;
                cursor: pointer;
            }

            .videolist {
                width: 100%;
                height: 80px;
                overflow-x: auto;

                .videoitem {
                    width: 142px;
                    height: 80px;
                    background: red;
                    margin-right: 20px;
                    float: left;

                    video {
                        width: 100%;
                        height: 100%;
                        background: red;
                    }
                }
            }
        }
    }
}
::v-deep .el-input__wrapper {
    background: rgba(74, 74, 74, 1);
}
</style>